<template>
	<div>
		<el-select
			v-model="value"
			placeholder="请选择"
			style="width: 100%"
			filterable
			clearable
			@change="onChange"
		>
			<el-option
				v-for="item in course_list"
				:key="item.id"
				:label="item.section_theme"
				:value="item.id"
				:disabled="item.isUse === 0 ? true : false"
			>
				<el-tooltip
					class="item"
					effect="dark"
					content="该课程已停止使用，如果要使用请在《课程资源》里面设置该课程状态为《启用》"
					placement="top-start"
					v-if="item.isUse === 0 ? true : false"
				>
					<span style="float: left">{{ item.section_theme }}</span>
				</el-tooltip>
					<span v-else style="float: left">{{ item.section_theme }}</span>
					<span
						style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
						>{{ item.course_id }}</span
					>
			</el-option>
		</el-select>
	</div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, ref, watch, computed } from "vue";

export default defineComponent({
	name: "course_section_theme",

	props: {
		modelValue: [String, Number, Array],
		props: Object
	},

	expose: ["getCourseList","onChange"],
	// props: {
	// 	value: {
	// 		type: String,
	// 	}
	// },

	emits: ["update:modelValue","change", "click"],

	setup(props, { emit }) {
		// 请求服务
		const service = inject<any>("service");

		// 数据列表
		// const list = ref<any[]>([]);

		

		// 绑定值回调
		function onChange(val: any) {

			emit("update:modelValue", val);
			emit("change", val);
			// getCourseTheme(value.value)
		}

		// 绑定值
		const value = ref("");

		// // 暴露一些对外接口
		// const getCourseTheme = async (id) => {
		// 	const res =  await service.courseSourceService.info({id:id})
		// 	return res.teacher_experience
		// }

		// 定义课程列表
		const course_list = ref([]);

		// 获取课程数据并绑定到课程列表
		const getCourseList = async (param = {}) => {
			course_list.value = await service.courseSourceService.list({ ...param });
		};
		// 加载时调用函数
		onMounted(async () => {
			await getCourseList();
			console.log(course_list.value);
		});

		// 解析值
		watch(
			() => props.modelValue,
			(val: any) => {
				value.value = val;
			},
			{
				immediate: true
			}
		);

		// onMounted(async () => {
		// 	console.log(service);

		// 	list.value = await service.studentService.list();
		// 	console.log(list.value);
		// });

		return {
			value,
			onChange,
			course_list,
			getCourseList
		};
	}
});
</script>
